<template>
  <div class="card">
    <div style="margin-bottom: 20px">
      <a-input v-model="formData.search.name" class="input" placeholder="用户姓名"></a-input>
      <a-input v-model="formData.search.phone" class="input" placeholder="用户手机"></a-input>
      <a-button style="margin-right: 10px" type="primary">查询</a-button>
      <a-button @click="reset">重置</a-button>
    </div>
    <a-spin :spinning="loading">
      <a-table bordered :columns="columns" :data-source="data" :rowKey="(record, index) => index" :pagination="false">
      </a-table>
    </a-spin>
  </div>
</template>

<script>
export default {
  name: 'Largemarketuser',
  data() {
    return {
      loading: false,
      formData: {
        search: {
          name: '',
          phone: ''
        }
      },
      data: [],
      columns: [
        {
          title: '品牌',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '排名',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '用户名称',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '用户手机号',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '日期',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center'
        }
      ]
    }
  },
  methods: {
    reset() {
      this.formData = {
        search: {
          name: '',
          phone: ''
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}

.input {
  margin-right: 10px;
  width: 200px;
}
</style>
